<!--# 
layout("/layout/default.html",{"menu":["settings","wechat_setting"],"breadcrumbs":[{"name":"微信配置"}]}){ 
 #-->
<div class="tabbable">
	<ul class="nav nav-tabs padding-12 tab-color-blue background-blue"
		id="myTab4">
		<li class="active"><a data-toggle="tab" href="#integration"
			onclick="setStep('integration')">微信接入</a></li>

		<li><a data-toggle="tab" href="#menus" onclick="setStep('menus')">菜单配置</a></li>


	</ul>

	<div class="tab-content">
		<div id="integration" class="tab-pane in active">
			<div class="widget-box">
				<div class="widget-header widget-header-blue widget-header-flat">
					<h4 class="widget-title lighter">微信接入向导</h4>

					<div class="widget-toolbar"></div>
				</div>

				<div class="widget-body">
					<div class="widget-main">
						<div id="fuelux-wizard-container" class="wizard-container">
							<div>
								<ul class="steps">
									<li data-step="1" class="active"><span class="step">1</span>
										<span class="title">微信参数</span></li>

									<li data-step="2"><span class="step">2</span> <span
										class="title">接入地址</span></li>

									<li data-step="3"><span class="step">3</span> <span
										class="title">接入测试</span></li>
								</ul>

							</div>

							<hr />

							<div class="step-content pos-rel">
								<div class="step-pane active" data-step="1">
									<div class="row">
										<div class="col-md-8 col-md-offset-2">
											<div class="alert alert-info">
												<button type="button" class="close" data-dismiss="alert">
													<i class="ace-icon fa fa-times"></i>
												</button>
												<strong>提示:</strong> 请根据微信公众平台填写以下信息!<br>
											</div>
											<form class="form-horizontal" role="form" id="merchants-from">

												<div class="form-group">
													<label class="col-sm-3 control-label no-padding-right"
														for="form-field-1-1"> appID </label>

													<div class="col-sm-9">
														<input type="text" name="appid"
															placeholder="请输入微信公众平台appID" class="form-control"
															data-type='required' data-error='请输入微信公众平台appID'
															value="${obj.data.wxConfig.appid! == null ? obj.data.wechat.appid  : obj.data.wxConfig.appid }">
													</div>
												</div>

												<div class="form-group">
													<label class="col-sm-3 control-label no-padding-right"
														for="form-field-1-1"> appsecret </label>

													<div class="col-sm-9">
														<input type="text" name="appsecret"
															placeholder="请输入微信公众平台appsecret" class="form-control"
															data-type='required' data-error='请输入微信公众平台appsecret'
															value="${obj.data.wxConfig.appsecret! == null ? obj.data.wechat.appsecret  : obj.data.wxConfig.appsecret  }">
													</div>
												</div>

												<div class="form-group">
													<label class="col-sm-3 control-label no-padding-right"
														for="form-field-1-1"> Token </label>

													<div class="col-sm-9">
														<input type="text" name="token"
															placeholder="请输入微信公众平台Token" class="form-control"
															data-type='required' data-error='请输入微信公众平台Token'
															value="${obj.data.wxConfig.token! == null ? obj.data.wechat.token  : obj.data.wxConfig.token}">
													</div>
												</div>

												<div class="form-group">
													<label class="col-sm-3 control-label no-padding-right"
														for="form-field-1-1"> encodingAesKey </label>

													<div class="col-sm-9">
														<input type="text" name="encodingAesKey"
															placeholder="请输入微信公众平台encodingAesKey"
															class="form-control" data-type='required'
															data-error='请输入微信公众平台encodingAesKey'
															value="${obj.data.wxConfig.encodingAesKey! == null ? obj.data.wechat.encodingAesKey  : obj.data.wxConfig.encodingAesKey}">
													</div>
												</div>
											</form>
										</div>
									</div>
								</div>

								<div class="step-pane" data-step="2">
									<div class="row">
										<div class="col-md-8 col-md-offset-2">
											<div class="alert alert-info">
												<button type="button" class="close" data-dismiss="alert">
													<i class="ace-icon fa fa-times"></i>
												</button>
												<strong>提示:</strong> 请将以下地址填入微信公众平台的接口地址处,并提交!<br>
											</div>

											<form class="form-horizontal" role="form">

												<div class="form-group">
													<label class="col-sm-3 control-label no-padding-right"
														for="form-field-1-1"> 接入URL </label>

													<div class="col-sm-9">
														<div class="input-group  ">
															<input type="text" id="merchants-url" readonly="readonly"
																class="form-control"
																value="http://${obj.data.config['base.domain'] }${obj.data.context == '' ? '' : '/' + obj.data.context  }/wechat">
															<span class="input-group-addon"> <i
																class="ace-icon fa fa-copy" data-clipboard-action="copy"
																data-clipboard-target="#merchants-url"></i>
															</span>
														</div>
													</div>
												</div>
											</form>
										</div>
									</div>
								</div>

								<div class="step-pane" data-step="3">
									<div class="row">
										<div class="col-md-8 col-md-offset-2 center">
											<div class="alert alert-info">
												<button type="button" class="close" data-dismiss="alert">
													<i class="ace-icon fa fa-times"></i>
												</button>
												<strong>提示:</strong>
												如果成功显示了二维码,那么恭喜你,配置成功!不过你最好还是扫描一下二维码看是否是你所设置的公众号!<br>
											</div>
											<img id="merchantsQr" alt=""
												src="${base!}/setting/wechat/qr/EMPLOYEE">
										</div>
									</div>
								</div>
							</div>

						</div>
						<hr />
						<div class="wizard-actions">
							<button class="btn btn-prev">
								<i class="ace-icon fa fa-arrow-left"></i> 上一步
							</button>

							<button class="btn btn-success btn-next" data-last="完成">
								下一步 <i class="ace-icon fa fa-arrow-right icon-on-right"></i>
							</button>

						</div>

					</div>
				</div>
			</div>
		</div>

		<div id="menus" class="tab-pane">
			<div class="widget-box widget-color-blue">
				<div class="widget-header">
					<h5 class="widget-title bigger lighter">
						<i class="ace-icon fa fa-table"></i> 菜单列表
					</h5>

					<div class="widget-toolbar">
						<a href="#" onclick="addMenu()"
							class="btn btn-info btn-sm"><i class="fa fa-plus-circle"></i>
							新增菜单</a> <a href="#" onclick="asynMenu()"
							class="btn btn-info btn-sm"><i class="fa fa-cloud-upload"></i>
							同步菜单</a>
					</div>
				</div>

				<div class="widget-body">
					<div class="widget-main no-padding">
						<table class="table table-striped table-bordered table-hover">
							<thead class="thin-border-bottom">
								<tr>
									<th class="center">id</th>
									<th class="center">菜单名称</th>
									<th class="center">菜单序号</th>
									<th class="center">菜单类型</th>
									<th class="center">菜单描述</th>
									<th class="center">菜单动作</th>
									<th class="center">操作</th>
								</tr>
							</thead>

							<tbody id="merchants-menus-panel">
								<!-- 菜单数据填充 -->
								<tr>
									<td colspan="7">没有菜单</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>

		</div>

	</div>
</div>
<script src="${base!}/resources/ace/js/fuelux/fuelux.wizard.js"></script>
<script src="${base!}/resources/clip/clipboard.min.js"></script>
<script type="text/javascript">
<!--
	var currentStep = 'merchants-integration';
	function setStep(step) {
		currentStep = step;
		if (currentStep == 'menus') {
			var index = layer.load();
			$.ajaxSetup({
				async : false
			});
			$.post(getRootPath() + '/setting/wechat/menu', {}, function(result) {
				layer.close(index);
				if (result.operationState == 'SUCCESS') {
					if (result.data.menus.length) {
						var panel = $('#merchants-menus-panel').empty();
						$(result.data.menus).each(function(i, item) {
							panel.append('<tr>\
									<td>'+item.id+'</td>\
									<td>'+item.name+'</td>\
									<td>'+item.index+'</td>\
									<td>'+item.typeName+'</td>\
									<td>'+item.description+'</td>\
									<td>'+item.action+'</td>\
									<td class="center">\
										<div class="hidden-sm hidden-xs btn-group">\
											<button class="btn btn-xs btn-info btn-edit" data-id="'+item.id+'" >\
												<i class="ace-icon fa fa-pencil bigger-120"></i>\
											</button>\
											<button class="btn btn-xs btn-danger btn-del" data-id="'+item.id+'" >\
												<i class="ace-icon fa fa-trash-o bigger-120"></i>\
											</button>\
										</div>\
									</td>\
								</tr>');
						})
					}
				} else {
					layer.alert(result.data.reason, {
						title : '操作失败'
					});
				}
			}, 'json');
			$.ajaxSetup({
				async : true
			});
		}
	}
	
	function asynMenu() {
		layer.open({
			type : 2,
			title : '同步微信菜单',
			fix : false,
			closeBtn : false,
			move : false,
			area : [ '1020px', '760px' ],
			content : getRootPath() + '/setting/wechat/menu/asyn/',
			btn : [ '同步', '取消' ],
			yes : function(index, layero) {
				// do submit
				$.post(getRootPath() + '/setting/wechat/menu/asyn/',{},function(result){
					if (result.operationState == 'SUCCESS') {
							layer.close(index);
						} else {
							var iframeWin = window[layero.find('iframe')[0]['name']];
							iframeWin.showError(result.data.reason);
						}
				},'json');
			},
			cancel : function(index) {
				layer.close(index);
			}
		});
	}
	function addMenu() {
		layer.open({
			type : 2,
			title : '添加微信菜单',
			fix : false,
			closeBtn : false,
			move : false,
			area : [ '800px', '600px' ],
			content : getRootPath() + '/setting/wechat/menu/add/',
			btn : [ '确认', '取消' ],
			yes : function(index, layero) {
				// do submit
				if ($(layer.getChildFrame('.form-horizontal', index)).validation()) {
					$.post(getRootPath() + '/setting/wechat/menu/add', layer.getChildFrame('.form-horizontal', index).serialize(), function(result) {
						if (result.operationState == 'SUCCESS') {
							layer.close(index);
							location.reload();
						} else {
							var iframeWin = window[layero.find('iframe')[0]['name']];
							iframeWin.showError(result.data.reason);
						}
					}, 'json');
				}
			},
			cancel : function(index) {
				layer.close(index);
			}
		});
	}
	$(function() {
		$('body').on('click', '.btn-edit', function() {
			var id =	$(this).data('id');
			layer.open({
			type : 2,
			title : '添加微信菜单',
			fix : false,
			closeBtn : false,
			move : false,
			area : [ '800px', '600px' ],
			content : getRootPath() + '/setting/wechat/menu/edit/' + id,
			btn : [ '确认', '取消' ],
			yes : function(index, layero) {
				// do submit
				if ($(layer.getChildFrame('.form-horizontal', index)).validation()) {
					$.post(getRootPath() + '/setting/wechat/menu/edit', layer.getChildFrame('.form-horizontal', index).serialize(), function(result) {
						if (result.operationState == 'SUCCESS') {
							layer.close(index);
							location.reload();
						} else {
							var iframeWin = window[layero.find('iframe')[0]['name']];
							iframeWin.showError(result.data.reason);
						}
					}, 'json');
				}
			},
			cancel : function(index) {
				layer.close(index);
			}
		});
			
		})
		$('body').on('click', '.btn-del', function() {
			var id =	$(this).data('id');
			layer.confirm('确认删除这条数据 ?', {
				icon : 3,
				title : '删除提示'
			}, function(index) {
				$.post(getRootPath() + '/setting/wechat/menu/delete', {
					id : id
				}, function(result) {
					layer.close(index);// 关闭弹窗
					if (result.operationState == 'SUCCESS') {
						refresh();// 刷新页面
					} else {
						showMessage(result.data.reason);
					}
				}, 'json');
			});
		})
		var $validation = false;
		
		$('.wizard-container').ace_wizard({
		//buttons: '.wizard-actions:eq(0)'
		}).on('actionclicked.fu.wizard', function(e, info) {
			//切换事件
			if (info.step == 2 && info.direction == 'next') {//第三
				$('#merchantsQr').attr('src', $('#merchantsQr').attr('src') + '?' + Math.random());
			}
			if (info.step == 1) {//第一个表单
					if ($('#merchants-from').validation()) {
						$.ajaxSetup({
							async : false
						});
						$.post(getRootPath() + '/setting/wechat/addOrUpdate', $('#merchants-from').serialize(), function(result) {
							if (result.operationState != 'SUCCESS') {
								layer.alert(result.data.reason, {
									title : '操作失败'
								});
								e.preventDefault();
							}
						}, 'json');
						$.ajaxSetup({
							async : true
						});
					} else {
						e.preventDefault();
					}
			}
		}).on('finished.fu.wizard', function(e) {
			//完成事件
			layer.open({
 				 title: '配置完成',
  				content: '恭喜你,微信配置完成!'
			}); 
			setTimeout(function() {
				location.reload();
			},3000);   
		}).on('stepclick.fu.wizard', function(e) {
			//e.preventDefault();//this will prevent clicking and selecting steps
		});
		
		var clipboard = new Clipboard('.fa-copy');
		clipboard.on('success', function(e) {
			validationFail('复制成功', e.trigger);
		});
		clipboard.on('error', function(e) {
			validationFail('复制失败', e.trigger);
		});
		
	})
//-->
</script>
<!--# } #-->